<template>

	<view class="oil-item df df-justify-content-between"
		@click="$navigateTo('/pages_order/pages/order/confirm-order/confirm-order?params='+encodeURIComponent(JSON.stringify(oil))+'&oiltype='+oiltype)"
		:class="{'active-border': index*1 === 0}">
		<!-- <image :src="oil.image" mode="aspectFill"></image> -->
		<view class="df df-flex-direction-column df-justify-content" style="font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #F12F63;">
			<text>平台价</text>
			<view style="font-size: 28rpx;">￥ <text style="font-size: 40rpx;">{{oil.platform_price}}</text> /L
			</view>
			<image :src="oil.member_day_img" mode="aspectFill" style="width: 108rpx;height: 67rpx;" v-if="oil.rebateday==1"></image>
		</view>
		<view class="oil-item-data">
			<view class="oil-title">
				<text>{{oil.name}}</text>
				<!-- <view class="goOilBtn">去加油</view> -->
				<!-- 用车派 赢免单 label  浙江油站显示 -->
				<!-- <view class="zhejiang-label" v-if="oil.province_id*1 === 330000 && oil.company==1">
					<text>
						叠加壳牌优惠
					</text>
				</view> -->
			</view>
			<view class="address-box df df-justify-content-between df-align-items">
				<text class="address">{{oil.address}}</text>
				<view class="distance-box" @click.stop="toMap(oil)">
					<text class="address-icon iconfont icon-shouhuodizhi"></text>
					<text class="distance">{{oil.distance}}</text>
				</view>
			</view>
			<view class="price-box df df-justify-content-between df-align-items">
				<view class="price-box-main df ">
					<view class="oil-price df df-flex-direction-column df-justify-content">
						<text>活动价</text>
						<view style="font-size: 28rpx;">￥ <text style="font-size: 40rpx;">{{oil.insure_price}}</text> /L
						</view>
					</view>
					<!-- <view class="price df df-flex-direction-column df-justify-content">
						<text>会员价</text>
						<view style="font-size: 28rpx;">￥ <text style="font-size: 40rpx;">{{oil.member_price}}</text> /L
						</view>
					</view> -->
					<!-- <view class="price df df-flex-direction-column df-justify-content">
						<text>平台价</text>
						<view style="font-size: 28rpx;">￥ <text style="font-size: 40rpx;">{{oil.platform_price}}</text> /L
						</view>
					</view> -->
					
					<view class="oil-price df df-flex-direction-column df-justify-content">
						<text>油站价</text>
						<view style="font-size: 28rpx;">￥ <text style="font-size: 40rpx;">{{oil.price}}</text> /L
						</view>
					</view>
					
					
					
					<!-- <view class="oil-price" v-if="oil.platform_price == oil.price">
						<text>油站价</text>
						<text>￥{{oil.price}}/L</text>
					</view>
					<view class="plat" style="width: 210rpx;margin-top: 30rpx; " v-else>
						<view class="plat-price" v-if="oil.yx_bit !== null">
							<text>平台</text>
							<text>￥{{oil.platform_price}}/L</text>起
						</view>
						<view class="plat-price" v-else>
							<text>平台</text>
							<text>￥{{oil.platform_price}}/L</text>
						</view>
						<view class="o-price">
							<text>油站</text>
							<text>￥{{oil.price}}/L</text>
						</view>
					</view> -->
					<!-- <view class="o-price df df-flex-direction-column df-justify-content">
						<text>指导价</text>
						<text>￥{{oil.o_price}}</text>
					</view> -->
				</view>
				<view class="collection" v-show="hide_col">取消收藏</view>
			</view>
		</view>
		<view class="active-label" style="color: #FFF;" v-if="index*1 === 0">
			当前油站
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			oil: {
				type: Object
			},
			hide_col: {
				type: Boolean
			},
			oiltype: {
				type: [Number, String]
			},
			index: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {

			}
		},
		methods: {
			toMap(item) {
				uni.openLocation({
					latitude: Number(item.lat),
					longitude: Number(item.lng),
					name: item.name,
					address: item.address,
					success: function() {},
					fail: function(res) {
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {}
										})
									} else {
										return false;
									}
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.oil-item {
		position: relative;
		width: 100%;
		min-height: 194rpx;
		margin-top: 30rpx;
		background-color: #fff;
		padding: 30rpx 20rpx;
		border-radius: 16rpx;
		box-sizing: border-box;

		&.active-border {
			border: 6rpx solid #F12F63;
		}

		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
		}

		.oil-item-data {
			width: 73%;

			.oil-title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				// padding-bottom: 12rpx;
				.goOilBtn {}

				.zhejiang-label {
					flex-shrink: 0;
					background-color: #F12F63;
					border-radius: 8rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					transform: scale(0.8);
					padding: 8rpx 16rpx;
				}
			}

			.address-box {
				.address {
					width: 70%;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #8F96AC;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.distance-box {
					height: 44rpx;
					background: #F4F4F4;
					border-radius: 40rpx;
					padding: 0 14rpx;
					text-align: center;
					line-height: 44rpx;

					.distance {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #50ACF8;
						padding-left: 4rpx;
					}

					.address-icon {
						color: #50ACF8;
					}
				}
			}

			.price-box {

				// padding-top: 26rpx;
				.price-box-main {
					.price {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #F12F63;
						margin-right: 20rpx;

						&:nth-of-type(2) {
							margin-right: 0rpx;
						}
					}

					.oil-price {
						font-size: 28rpx;
						align-self: flex-end;
						font-family: PingFang SC;
						color: #666;
						padding-left: 20rpx;
						// text-decoration:line-through;
					}
				}

				.collection {
					height: 60rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #F12F63;
					background: #FFFFFF;
					border: 1px solid #F12F63;
					border-radius: 46rpx;
					padding: 0 24rpx;
					line-height: 60rpx;
				}

				// .zhejiang-label{
				// 	flex-shrink: 0;
				// 	background-color: #F12F63;
				// 	border-radius: 8rpx;
				// 	color: #FFFFFF;
				// 	font-size: 24rpx;
				// 	transform: scale(0.8);
				// 	padding: 8rpx 16rpx;
				// }
			}
		}

		.plat-price {
			font-size: 27rpx;
			font-family: PingFang SC;
			// display: flex;
			font-weight: bold;
			color: #F12F63;
			padding-left: 15rpx;
		}

		.o-price {
			font-size: 27rpx;
			align-self: flex-end;
			font-family: PingFang SC;
			color: #666;
			padding-left: 15rpx;
			// text-decoration:line-through;
		}

		.active-label {
			position: absolute;
			top: -24rpx;
			left: 20rpx;
			font-weight: bold;
			font-size: 28rpx;
			background-color: #F12F63;
			padding: 4rpx 8rpx;
			border-radius: 8rpx;
		}
	}
</style>
